@import './../../../libs/scss/mixin.scss';
@import './../../../libs/scss/flex.scss';

/* 仿优酷 视频广告控制面板样式 */
.Full-yes{
	padding: 30rpx 60rpx;
}
.Full-no{
	padding: 0 30rpx;
}
.control-box{
	@extend .u-flex-column;
	@extend .u-flex-juc-sp-between;//上下对齐
}
.Top-box{
	@extend .u-flex-row;
	@extend .u-flex-nowrap;
	@extend .u-flex-juc-sp-between;//左右对齐
	@extend .u-flex-al-items-center;
	height: 100rpx;
	
	&__left {
		
		&__item {
			@extend .u-flex-al-items-center;
			@extend .u-flex-juc-center;
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background-color: rgba(0,0,0,0.5);
		}
	}
	&__right {
		@extend .u-flex-row;
		@extend .u-flex-nowrap;
		
		&__item {
			@extend .u-flex-al-items-center;
			@extend .u-flex-juc-center;
			@include margin(0 15rpx);
			height: 70rpx;
			padding: 0 20rpx;
			background-color: rgba(0,0,0,0.5);
			border-radius: 50rpx;
		}
	}
	
}
.ad-tis-show-box{}
.adtishi-box{
	@extend .u-flex-row;
	@extend .u-flex-nowrap;
	@extend .u-flex-al-items-center;
	
	&__left{
		&__text{
			color: #FFFFFF;
			font-size: 38rpx;
		}
	}
	
	&__fenge{
		width: 5rpx;
		height: 32rpx;
		background-color: rgba(255,255,255,0.25);
		margin: 0 10rpx;
	}
	
	&__right{
		&__text{
			color: #fd1;
			font-size: 34rpx;
		}
	}
	
}

.conter-box {
	@extend .u-flex-al-items-center;
	@extend .u-flex-juc-center;
	
	&__play-btn {
		@extend .u-flex-al-items-center;
		@extend .u-flex-juc-center;
		
		width: 90rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background-color: rgba(0,0,0,0.5);

		&__img {
			@include m-left(3rpx);
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.Bottom-box{
	@extend .u-flex-row;
	@extend .u-flex-nowrap;
	@extend .u-flex-juc-sp-between;
	@extend .u-flex-al-items-center;
	height: 100rpx;
	// 20210916新增-左边暂停/播放	
	&__left{
		@extend .u-flex-row;
		@extend .u-flex-nowrap;
		@extend .u-flex-al-items-center;
		&__item{
			@extend .u-flex-row;
			@extend .u-flex-nowrap;
			@extend .u-flex-al-items-center;
			@include m-right(20rpx);
			
			height: 70rpx;
			padding: 0 20rpx;
			border-radius: 35rpx;
			background-color: #00d0d3;
			
		}
	}
	
	&__right{
		@extend .Bottom-box__left;
		&__item{
			@extend .Bottom-box__left__item;
			&__text{
				color: #FFFFFF;
				font-size: 32rpx;
			}
		}
	}
}
.down-item{
	@include padding(0 20rpx);
}
.btn-item{
	@include margin(0 15rpx);
	background-color: rgba(0,0,0,0.5);
}






